<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="css/font.css">
    <link rel="stylesheet" href="css/xadmin.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="../static/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style>

      /*加载图像的位置*/
      .scene {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      /*加载图标的大小*/
      .scene svg {
        width: 240px;
        height: 240px;
      }
      .dc-logo:hover svg {
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-animation: arrow-spin 2.5s 0s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
        animation: arrow-spin 2.5s 0s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
      }
      #uploadTxT{

      }
      #loadHtml{
        height: 400px;
        width: 400px;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        min-width:80%;/*这个比例可以自己按需调节*/
        overflow: visible;
        bottom: inherit;
        right: inherit;
      }

      .closeUploadHtml{
        margin: auto;
        position: absolute;
        top: 86%; left: 45.5%; bottom: 0; right: 0;
      }
      #uploadExperimentalDocument{
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        min-width:80%;/*这个比例可以自己按需调节*/
        overflow: visible;
        bottom: inherit;
        right: inherit;
      }
      @-webkit-keyframes arrow-spin {
        50% {
          -webkit-transform: rotateY(360deg);
          transform: rotateY(360deg);
        }
      }

      @keyframes arrow-spin {
        50% {
          -webkit-transform: rotateY(360deg);
          transform: rotateY(360deg);
        }
      }
    </style>
  </head>
  
  <body>
    <div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">演示</a>
        <a>
          <cite>导航元素</cite></a>
      </span>
      <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
    </div>
    <div class="x-body">
      <div class="layui-row">
          <!--<button class="layui-btn"  onclick="x_admin_show('视频上传','./upload-video.html',400,600)"><i class="layui-icon"></i>上传视频</button>-->
        <button class="layui-btn"  onclick="showUploadHtml()"><i class="layui-icon"></i>上传视频</button>
      </div>
      <xblock>
        <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除</button>
      </xblock>
      <table class="layui-table">
        <thead>
        <tr>
          <th>
            <div class="layui-unselect header layui-form-checkbox" lay-skin="primary"><i class="layui-icon">&#xe605;</i></div>
          </th>
          <th>ID</th>
          <th>视频名</th>
          <th>老师ID</th>
          <th>类别</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody id="member-list">
        <tr>
          <td>
            <div class="layui-unselect layui-form-checkbox" lay-skin="primary" data-id='2'><i class="layui-icon">&#xe605;</i></div>
          </td>
          <td>1</td>
          <td>linux基础视频</td>
          <td>20172686</td>
          <td>C</td>
          <td class="td-manage">
            <a title="删除" onclick="member_del(this,'要删除的id')" href="javascript:;">
              <i class="layui-icon">&#xe640;</i>
            </a>
          </td>
        </tr>
        </tbody>
      </table>
      <div>
        <ul class="pagination" id="page-number">

        </ul>
      </div>
    </div>


    <!--上传界面-->
    <a data-toggle="modal" data-target="#uploadExperimentalDocument" id="uploadExperimental" onclick="return false;"></a>
    <div class="modal fade" id="uploadExperimentalDocument" tabindex="-1" role="dialog" aria-labelledby="uploadExperimentalDocumentLabel" data-backdrop="static">
      <div class="modal-dialog" role="document">
        <div class="modal-content">

          <!--上传视频-->
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="uploadExperimentalDocumentLabel">上传视频</h4>
          </div>

          <!--上传表单-->
          <div class="modal-body">
            <form id="videoForm" method="POST" enctype="multipart/form-data">
              <div class="form-group">
                <label for="videoTitle" class="control-label">视频题目</label>
                <input type="text" class="form-control" id="videoTitle" maxlength="200" placeholder="不能超过200字符..." name="childTitle">
              </div>

              <div id="selectParentTitle"></div>
              <div class="form-group" id="createParentTitle"></div>
              <div class="form-group" id="selectParent"></div>
              <div>
                <label class="control-label">选择视频分类</label>
                <select class="form-control" id="myClass" name="videoClass">
                  <option>C</option>
                  <option>Python</option>
                  <option>C++</option>
                  <option>Linux</option>
                  <option>Web</option>
                  <option>信息安全</option>
                  <option>PHP</option>
                  <option>Java</option>
                  <option>NodeJS</option>
                  <option>Android</option>
                  <option>GO</option>
                  <option>Spark</option>
                  <option>Hadoop</option>
                  <option>HTML5</option>
                  <option>Scala</option>
                  <option>Ruby</option>
                  <option>R</option>
                  <option>网络</option>
                  <option>Git</option>
                  <option>SQL</option>
                  <option>NoSQL</option>
                  <option>算法</option>
                  <option>Docker</option>
                  <option>Swift</option>
                  <option>汇编</option>
                  <option>其他</option>
                </select>
              </div>

              <div class="form-group">
                <label for="video" class="control-label">视频文件</label>
                <input type="file" class="form-control" id="video" accept="video/*" name="video">
              </div>
              <div id="videoFile" class="w50" style="display: none"></div>
            </form>
          </div>

          <!--关闭 上传-->
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal" id="closeUpload">关闭</button>
            <button type="button" class="btn btn-primary" onclick="uploadVideo()">上传</button>
          </div>
        </div>
      </div>
    </div>


    <!--加载页面-->
    <a data-toggle="modal" data-target="#loadHtml" id="load" onclick="return false;"></a>

      <div class="modal fade" id="loadHtml" tabindex="-1" role="dialog" aria-labelledby="loadLabel" data-backdrop="static">
        <div class="scene">
          <svg version="1.1" id="dc-spinner" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="38" height="38" viewBox="0 0 38 38" preserveAspectRatio="xMinYMin meet">

            <text x="14" y="21" font-family="Monaco" font-size="2px" style="" fill="grey" id="uploadTxT">正在上传
              <animate
                      attributeName="opacity"
                      values="0;1;0" dur="1.8s"
                      repeatCount="indefinite">
              </animate>
            </text>

            <path fill="#373a42" d="M20,35c-8.271,0-15-6.729-15-15S11.729,5,20,5s15,6.729,15,15S28.271,35,20,35z M20,5.203
                C11.841,5.203,5.203,11.841,5.203,20c0,8.159,6.638,14.797,14.797,14.797S34.797,28.159,34.797,20
                C34.797,11.841,28.159,5.203,20,5.203z">
            </path>

            <path fill="#373a42" d="M20,33.125c-7.237,0-13.125-5.888-13.125-13.125S12.763,6.875,20,6.875S33.125,12.763,33.125,20
                S27.237,33.125,20,33.125z M20,7.078C12.875,7.078,7.078,12.875,7.078,20c0,7.125,5.797,12.922,12.922,12.922
                S32.922,27.125,32.922,20C32.922,12.875,27.125,7.078,20,7.078z">
            </path>

            <path fill="#2AA198" stroke="#2AA198" stroke-width="0.6027" stroke-miterlimit="10" d="M5.203,20
                    c0-8.159,6.638-14.797,14.797-14.797V5C11.729,5,5,11.729,5,20s6.729,15,15,15v-0.203C11.841,34.797,5.203,28.159,5.203,20z">
              <animateTransform
                      attributeName="transform"
                      type="rotate"
                      from="0 20 20"
                      to="360 20 20"
                      calcMode="spline"
                      keySplines="0.4, 0, 0.2, 1"
                      keyTimes="0;1"
                      dur="2s"
                      repeatCount="indefinite">
              </animateTransform>
            </path>

            <path fill="#859900" stroke="#859900" stroke-width="0.2027" stroke-miterlimit="10" d="M7.078,20
              c0-7.125,5.797-12.922,12.922-12.922V6.875C12.763,6.875,6.875,12.763,6.875,20S12.763,33.125,20,33.125v-0.203
              C12.875,32.922,7.078,27.125,7.078,20z">
              <animateTransform
                      attributeName="transform"
                      type="rotate"
                      from="0 20 20"
                      to="360 20 20"
                      dur="1.8s"
                      repeatCount="indefinite">
              </animateTransform>
            </path>
          </svg>
        </div>
        <div class="closeUploadHtml">
          <button type="button" class="btn btn-danger" data-dismiss="modal" id="closeUploadHtml" onclick="cancelVideoUpload()">取消上传</button>
        </div>
      </div>




    <script>
      layui.use(['form'], function(){
        form = layui.form;
        
      });

      /*用户-删除*/
      function member_del(obj,id){
          layer.confirm('确认要删除吗？',function(index){
              //发异步删除数据
              $(obj).parents("tr").remove();
              layer.msg('已删除!',{icon:1,time:1000});
          });
      }



      function delAll (argument) {

        var data = tableCheck.getData();
  
        layer.confirm('确认要删除吗？'+data,function(index){
            //捉到所有被选中的，发异步进行删除
            layer.msg('删除成功', {icon: 1});
            $(".layui-form-checked").not('.header').parents('tr').remove();
        });
      }
    </script>
    <script>var _hmt = _hmt || []; (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
      })();
    </script>

    <script>
        let sumPageCount;
        let locationCurrPage;
        let teacherId;
        function getSumVideoPageNumber() {
            let obj = {};
            obj.teacherId = teacherId;
            $.ajax({
                url: "/getTeacherVideoSumNumber",
                type: "POST",
                cache: false,
                async: false,
                data: obj,
                success: function (data) {
                    sumPageCount = data;
                    console.log(data);
                    showPage();
                },
                error: function () {
                    alert("ajaxError: 函数getSumVideoPageNumber请求失败");
                }

            });
        }
        function getTeacherId() {
            $.ajax({
                url: "/get_user",
                type: "POST",
                cache: false,//设置不缓存
                success: function (data) {
                    let user = JSON.parse(data);
                    teacherId = user['id'];
                    console.log(teacherId);
                    getSumVideoPageNumber();
                },
                error:function () {
                }
            });
        }
        function showPage() {
            showVideoByPageNumber(1);
            locationCurrPage = 1;
            let str = "<li><a onclick=\"jumpToPreviousPage()\">&laquo;</a></li>";
            for (let i = 0; i < sumPageCount; i++){
                str += "<li><a onclick=\"showVideoByPageNumber(" +(i+1) + ")\">"+ (i+1) +"</a></li>";
            }
            str += "<li><a onclick=\"jumpToNextPage()\">&raquo;</a></li>";
            document.getElementById("page-number").innerHTML = str;
        }
        function jumpToPreviousPage() {
            if (locationCurrPage == 1){

            }else{
                locationCurrPage = locationCurrPage - 1;
                showVideoByPageNumber(locationCurrPage);
            }
        }
        function jumpToNextPage() {
            if (locationCurrPage == sumPageCount){

            }else{
                locationCurrPage = locationCurrPage + 1;
                showVideoByPageNumber(locationCurrPage);
            }
        }
        function showVideoByPageNumber(currPageNumber) {
            locationCurrPage =currPageNumber;
            let obj = new Object();
            obj.teacherId = teacherId;
            obj.currPageNumber = currPageNumber;
            $.ajax({
                url: "/getTeacherPageVideo",
                type: "POST",
                data:obj,
                cache: false,//设置不缓存
                success: init_success,
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    if (XMLHttpRequest.status >= 400 && XMLHttpRequest.status < 500) {
                        alert("客户端请求出错！错误代码（" + XMLHttpRequest.status + "," + XMLHttpRequest.readyState + "," + textStatus + "）");
                    } else {
                        if (XMLHttpRequest.status >= 500 || XMLHttpRequest.status <= 600) {
                            alert("服务器出错！错误代码（" + XMLHttpRequest.status + "," + XMLHttpRequest.readyState + "," + textStatus + "）");
                        } else {
                            if (XMLHttpRequest.status >= 300 || XMLHttpRequest.status < 400) {
                                alert("重定向问题！错误代码（" + XMLHttpRequest.status + "," + XMLHttpRequest.readyState + "," + textStatus + "）");
                            } else {
                                alert("抱歉，系统好像出现一些异常！错误代码（" + XMLHttpRequest.status + "," + XMLHttpRequest.readyState + "," + textStatus + "）");
                            }
                        }
                    }
                }
            });
        }

        function init_success(data) {
            data = JSON.parse(data);
            var dom = document.getElementById("member-list");
            var str = "";
            var length = data.currPageVideoList.length;
            for(var i = 0;i<length;i++){
                str += "<tr>" +
                    "<td>" +
                    "<div class=\"layui-unselect layui-form-checkbox\" lay-skin=\"primary\" data-id='2'><i class=\"layui-icon\">&#xe605;</i></div>" +
                    "</td>" +
                    "<td>"+ ((locationCurrPage-1)*10 + i + 1) +"</td>" +
                    "<td>"+ data.currPageVideoList[i].parentTitle+"-"+data.currPageVideoList[i].childTitle +"</td>" +
                    "<td>"+ data.currPageVideoList[i].teacherId +"</td>" +
                    "<td>"+ data.currPageVideoList[i].videoClass +"</td>" +
                    "<td class=\"td-manage\">\n" +
                    "<a title=\"删除\" onclick='member_del(this,\"" + data.currPageVideoList[i].imgLocalUrl + "\"" +",\"" + data.currPageVideoList[i].localUrl +"\""+")'href=\"javascript:;\">" +
                    "<i class=\"layui-icon\">&#xe640;</i>\n" +
                    "</a>\n" +
                    "</td>" +
                    "</tr>"
            }
            dom.innerHTML = str;
        }
        function member_del(obj,imgLocalUrl, localUrl){
            layer.confirm('确认要删除吗？',function(index){
                //发异步删除数据
                $(obj).parents("tr").remove();
                layer.msg('已删除!',{icon:1,time:1000});
                //ajax请求
                var ob = new Object();
                ob.imgLocalUrl = imgLocalUrl;
                ob.localUrl = localUrl;
                $.ajax({
                    url:"/deleteByLocalUrl",
                    method: "POST",
                    data: ob,
                    cache:false,
                    success:function (msg) {
                        alert(msg);
                    } ,
                    error:function () {
                        alert("ajax错误，删除失败")
                    }
                });
            });
        }

        function showUploadHtml() {
            document.getElementById("uploadExperimental").click();
            getParentTitle();
        }
        function getParentTitle() {
            var URL = "/getParentVideoByTeacherId";
            $.ajax({
                type: 'GET',
                url: URL,
                async: false,
                success: function (data) {
                    data=JSON.parse(data);
                    var result = data.result;
                    var createParentTitle="<label for=\"videoTitle\" class=\"control-label\">新建视频文件夹</label>\n" +
                        "                <input name='parentTitleCreate' type=\"text\" class=\"form-control\" id=\"parentTitleCreate\" maxlength=\"200\" placeholder=\"新建视频文件夹和下拉框中选择只能选择一个\">";
                    var selectParent="<label for=\"video\" class=\"control-label\">视频文件夹封面</label>\n" +
                        "                <input type=\"file\" class=\"form-control\" id=\"parentImg\" accept=\"image/*\" name=\"parentImg\">";
                    document.getElementById("createParentTitle").innerHTML=createParentTitle;
                    document.getElementById("selectParent").innerHTML=selectParent;
                    if(result==="error: 没有视频文件夹"){
                        return
                    }
                    var parentList = data.parentList;
                    var length = parentList.length;
                    var selectParentTitle="<label class=\"control-label\">选择视频文件夹</label>\n" +
                        "                <select class=\"form-control\" id=\"parentTitleSelect\" name=\"parentTitleSelect\">"+"<option value=''>==请选择==</option>";
                    for (var count=0;count<length;count++){
                        selectParentTitle+="<option value='"+parentList[count].parentTitle+"'>"+parentList[count].parentTitle+"</option>";
                    }
                    selectParentTitle+="</select>";
                    document.getElementById("selectParentTitle").innerHTML=selectParentTitle;
                },
                error: function() {
                    alert("ajaxError: 函数showVideoByPageNumber请求失败");
                }
            });
        }
        function uploadVideo() {
            let form = new FormData(document.getElementById("videoForm"));
            var parentTitleSelect = form.get("parentTitleSelect");
            var parentTitleCreate = form.get("parentTitleCreate");
            var parentTitle;
            var childTitle = form.get("childTitle");
            var parentImg = $('#parentImg').get(0).files[0];
            var video = $('#video').get(0).files[0];
            console.log(typeof video);
            if (childTitle===""){
                alert("视频题目不能为空");
                return;
            }

            if (parentTitleSelect===null&&parentTitleCreate===""){
                alert("视频文件夹创建和选择请选择一个");
                return;
            }
            if (parentTitleSelect!==null&&parentTitleCreate!==""){
                alert("视频文件夹创建和选择只能选择一个");
                return;
            }
            if (parentTitleCreate===""){
                if (parentImg){
                    alert("没有新建视频文件夹，视频封面图片不能选择");
                    return;
                }
                parentTitle=parentTitleSelect;
            } else{
                if (!parentImg){
                    alert("请选择视频文件夹的封面图片");
                    return;
                }
                parentTitle=parentTitleCreate;
            }
            if(!video){
                alert("请添加上传视频");
                return;
            }
            form.delete("parentTitleSelect");
            form.delete("parentTitleCreate");
            form.append("parentTitle",parentTitle);
            let str ="&nbsp;&nbsp;&nbsp;准备上传\n" +
                "<animate\n" +
                "attributeName=\"opacity\"\n" +
                "values=\"0;1;0\" dur=\"1.8s\"\n" +
                "repeatCount=\"indefinite\">\n" +
                "</animate>";
            document.getElementById("uploadTxT").innerHTML=str;
            document.getElementById("load").click();
            let url = "/uploadVideo";
            xhr = new XMLHttpRequest();  // XMLHttpRequest 对象
            xhr.open("post", url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
            xhr.onload = uploadComplete; //请求完成
            xhr.onerror =  uploadFailed; //请求失败
            xhr.upload.onprogress = progressFunction;//【上传进度调用方法实现】
            xhr.upload.onloadstart = function(){//上传开始执行方法
                ot = new Date().getTime();   //设置上传开始时间
                oloaded = 0;//设置上传开始时，以上传的文件大小为0
            };
            xhr.send(form); //开始上传，发送form数据
        }
        function progressFunction(evt) {
            let time = document.getElementById("uploadTxT");
            let nt = new Date().getTime();//获取当前时间
            let pertime = (nt-ot)/1000; //计算出上次调用该方法时到现在的时间差，单位为s
            ot = new Date().getTime(); //重新赋值时间，用于下次计算

            let perload = evt.loaded - oloaded; //计算该分段上传的文件大小，单位b
            oloaded = evt.loaded;//重新赋值已上传文件大小，用以下次计算

            //上传速度计算
            let speed = perload/pertime;//单位b/s
            let bspeed = speed;
            let units = 'b/s';//单位名称
            if(speed/1024>1){
                speed = speed/1024;
                units = 'k/s';
            }
            if(speed/1024>1){
                speed = speed/1024;
                units = 'M/s';
            }
            speed = speed.toFixed(1);
            //剩余时间
            let resttime = ((evt.total-evt.loaded)/bspeed).toFixed(0);
            let lastTime;
            if (resttime<60){
                lastTime = resttime+"s";
            }
            if (resttime>60&&resttime<3600){
                lastTime = parseInt(resttime/60)+"min"+(resttime%60)+"s";
            }
            if (resttime>3600){
                lastTime = parseInt(resttime/60)+"h"+(resttime%60)+"min";
            }
            if (resttime!=0){
                time.innerHTML =speed+ units +" \n" +
                    lastTime +"\n" +
                    "<animate\n" +
                    "attributeName=\"opacity\"\n" +
                    "values=\"0;1;0\" dur=\"1.8s\"\n" +
                    "repeatCount=\"indefinite\">\n" +
                    "</animate>";
            } else{
                let str ="正在存入数据库\n" +
                    "<animate\n" +
                    "attributeName=\"opacity\"\n" +
                    "values=\"0;1;0\" dur=\"1.8s\"\n" +
                    "repeatCount=\"indefinite\">\n" +
                    "</animate>";
                time.innerHTML=str;
            }

        }
        //上传成功响应
        function uploadComplete(evt) {
            let str ="&nbsp;&nbsp;&nbsp;上传成功\n" +
                "<animate\n" +
                "attributeName=\"opacity\"\n" +
                "values=\"0;1;0\" dur=\"1.8s\"\n" +
                "repeatCount=\"indefinite\">\n" +
                "</animate>";
            document.getElementById("uploadTxT").innerHTML=str;
            setTimeout(function () {
                document.getElementById("closeUploadHtml").click();
                document.getElementById("closeUpload").click();
                window.location.reload();
            },2000);
        }
        //上传失败
        function uploadFailed(evt) {
            let str ="&nbsp;&nbsp;&nbsp;上传失败\n" +
                "<animate\n" +
                "attributeName=\"opacity\"\n" +
                "values=\"0;1;0\" dur=\"1.8s\"\n" +
                "repeatCount=\"indefinite\">\n" +
                "</animate>";
            document.getElementById("uploadTxT").innerHTML=str;
            setTimeout(function () {
                document.getElementById("closeUploadHtml").click();
                document.getElementById("closeUpload").click();
            },2000);
        }
        //取消上传
        function cancelVideoUpload(){
            document.getElementById("closeUploadHtml").click();
            document.getElementById("closeUpload").click();
        }
    </script>

    <script>
        $(document).ready(function () {
            getTeacherId();
        })
    </script>

  </body>

</html>